<script setup>
//import {excelApi} from "../../../api/axios";
//import {MINIO_HOST} from "../../../const";
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {
  dateFormat,
  myRemove,
  myPage,
  myRemoveBatch,
  getResponseData,
  clazzStatusFormat, elConfirm
} from "../../../util";
import {pageApi, removeApi, removeBatchApi} from "../../../api/clazz.js";
import {listApi as listDirectionApi} from "../../../api/direction.js";
import MyNav from "../../../components/MyNav.vue";
import MyHead from "../../../components/MyHead.vue";
import MyTable from "../../../components/MyTable.vue";
import MyPager from "../../../components/MyPager.vue";
import MyList from "../../../components/MyList.vue";
import {resetPasswdApi} from "../../../api/emp.js";
import {ElDialog, ElMessage, ElDatePicker} from "element-plus";

import { ElMessageBox } from 'element-plus'

/* ==================== 分页查询 ==================== */
// 表格数据 + 分页数据
let records = ref();
let pageInfo = shallowReactive({'pageNum': 1, 'pageSize': 5, 'fn': page});
// 分页查询条件字段：班级名称
let clazzName = shallowRef();
let directionId = shallowRef();

let dialogVisible = true

// 分页函数
async function page(pageNum = pageInfo['pageNum'], pageSize = pageInfo['pageSize']) {
  // 分页基础配置
  let config = {
    'api': pageApi,
    'params': {'pageNum': pageNum, 'pageSize': pageSize},
    'records': records,
    'pageInfo': pageInfo
  }

  // 附加为分页条件
  if (clazzName.value) config['params']['name'] = clazzName.value;
  if (directionId.value) config['params']['directionId'] = directionId.value;
  // 发送分页请求
  await myPage(config);
}

/* ==================== 查看详情 ==================== */
// 班级详情抽屉 + 班级详情列表数据
let detailDrawer = shallowRef();
let openClassDrawer = shallowRef();
let detailItems = ref();

/* ==================== 查询全部的方向记录 ==================== */
let directionItems = [{'label': '全部', 'value': 0}];

async function listDirection() {
  let res = await listDirectionApi();
  let directions = getResponseData(res);
  Object.values(directions).forEach(dire => {
    directionItems.push({'label': dire['name'], 'value': dire['id']});
  });
}

function detail(record) {
  detailItems.value = [
    {'label': '班级名称', 'value': record['name']},
    {'label': '方向', 'value': record['directionName']},
    {'label': '班主任', 'value': record['manager']},
    {'label': '开班时间', 'value': record['startTime'], 'format': dateFormat},
    {'label': '结课时间', 'value': record['endTime'], 'format': dateFormat},
    {'label': '状态', 'value': record['status'], format: clazzStatusFormat, type: 'tag'},
    {'label': '创建时间', 'value': record['created'], 'format': dateFormat},
    {'label': '修改时间', 'value': record['updated'], 'format': dateFormat},
    {'label': '班级描述', 'value': record['info'], 'type': 'card'},
  ];
  detailDrawer.value = true;
}

function openClass(record) {
  detailItems.value = [
    {'label': '班级名称', 'value': record['name']},
    {'label': '方向', 'value': record['directionName']},
    {'label': '班主任', 'value': record['manager']},
    {'label': '开班时间', 'value': record['startTime'], 'format': dateFormat},
    {'label': '结课时间', 'value': record['endTime'], 'format': dateFormat},
    {'label': '状态', 'value': record['status'], format: clazzStatusFormat, type: 'tag'},
    {'label': '创建时间', 'value': record['created'], 'format': dateFormat},
    {'label': '修改时间', 'value': record['updated'], 'format': dateFormat},
    {'label': '班级描述', 'value': record['info'], 'type': 'card'},
  ];
  openClassDrawer.value = true;
}

/* ==================== 单条添加 ==================== */
function insert() {
  router.push('/ClazzInsert');
}

/* ==================== 单条修改 ==================== */
function update(row) {
  sessionStorage.setItem('clazz', JSON.stringify(row));
  router.push('/ClazzUpdate');
}

/* ==================== 单条删除 ==================== */
function remove(row) {
  myRemove({'id': row['id'], 'api': removeApi, 'fn': page});
}

/* ==================== 批量删除 ==================== */
// 批量删除主键数组
let ids = [];

function selectionChange(rows) {
  ids = rows.map(e => e['id']);
}

function removeBatch() {
  myRemoveBatch({'ids': ids, 'api': removeBatchApi, 'fn': page})
}

/* ==================== 按班级名称模糊查询 ==================== */
function pageLikeName(val) {

  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || clazzName.value) {
    clazzName.value = val;
    page();
  }
}

/* ==================== 打印报表 ==================== */
function excel() {
  // excelApi('/clazz/excel', '班级统计表');
}

/* ==================== 按所方向查询 ==================== */
function pageByDirectionId(val) {
  // 仅当输入框有值，或者当前处于按条件分页状态时，发送分页请求
  if (val || directionId.value) {
    directionId.value = val;
    page();
  }
}

/* ==================== 加载函数 ==================== */
onMounted(() => {
  page()
  listDirection()
});

function handleDateChange(value) {
  // 处理日期选择变化
  console.log(value);
}

</script>

<template>

<my-nav :items="[
  {'icon': 'Avatar', 'label': '课程管理'},
  {'icon': 'User', 'label': '班级列表'},
]"/>

<my-head :items="[
  {'type': 'ipt', 'span': 5, 'placeholder': '按班级名称模糊搜索', 'fn': pageLikeName},
  {'type': 'opt', 'span': 5, 'placeholder': '按方向搜索', 'fn': pageByDirectionId, 'optItems': directionItems},
  {'type': 'insertBtn', 'offset': 11, 'fn': insert},
  {'type': 'deleteBtn', 'fn': removeBatch},
  {'type': 'excelBtn', 'fn': excel},
]"/>

<my-table v-if="records" :records="records" :columns="[
  {'column': ['班级信息', '名称'], 'property': 'name', 'width': 120},
  {'column': ['班级信息', '方向'], 'property': 'directionName', 'width': 120},
  {'column': ['班级信息', '班主任'], 'property': 'manager', 'width': 120},
  {'column': ['班级信息', '开班时间'], 'property': 'startTime', 'width': 120},
  {'column': ['班级信息', '结课时间'], 'property': 'endTime', 'width': 120},
  {'column': ['班级信息', '状态'], 'property': 'status', 'width': 120, format:clazzStatusFormat, type: 'tag', 'tagTypeFn': status=>{
    if (status === 0 || status === '0') return 'warning';
    if (status === 1 || status === '1') return 'success';
    if (status === 2 || status === '2') return 'danger';
    return 'default';
  }},
  {'column': ['班级信息', '备注'], 'property': 'info', type: 'card'},
]" :buttons="[
  {'type': 'info', 'fn': detail},
  {'type': 'update', 'fn': update},
  {'btnLabel': '开班', 'btnType': 'primary','btnIcon': 'star', 'fn': openClass},
  // {'btnLabel': '结课', 'btnType': 'primary','btnIcon': 'star', 'fn': resetPassword},
  {'type': 'delete', 'fn': remove}
]" :selection-change="selectionChange"/>

<my-pager v-if="records" :page-info="pageInfo"/>

<el-drawer v-model="detailDrawer" size="30%">
  <my-list title="记录详情" :items="detailItems"/>
</el-drawer>

<el-drawer v-model="openClassDrawer" size="30%">
  <div class="block">
    <el-date-picker
        v-model="detailItems.startTime"
        type="date"
        placeholder="Pick a day"
        :size="size"
    />
  </div>
  <template #footer>
    <div >
<!--      <el-button @click="openClassDrawer.value = false">取消</el-button>-->
      <el-button type="primary" @click="dialogVisible = false">确认</el-button>
    </div>
  </template>
</el-drawer>


</template>

<style scoped lang="scss">

</style>